<template>
    <div>
        <!--    标识是否显示层-->
        <el-dialog :visible.sync="loginVisible" width="360px" :show-close="false">
            <!--        主体层-->
            <div slot="title" class="login">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="普通登录" name="first" class="loginDefault">
                        <input type="text" placeholder="请输入帐号" v-model="defaultName">
                        <input type="text" placeholder="请输入密码" v-model="defaultPsw">
                        <br>
                        <button @click="defaultLogin">登录</button>
                    </el-tab-pane>
                    <el-tab-pane label="手机登录" name="second" class="loginPhone">
                        <input type="text" placeholder="请输入帐号" v-model="loginPhone">
                        <input type="text" placeholder="请输入验证码" class="hulfInput" v-model="loginCode">
                        <div class="hulfButton" @click="getLoginCode">获取验证码</div>
                        <br>
                        <div>
                            <button @click="phoneLogin">登录</button>
                        </div>
                    </el-tab-pane>
                    <div style="overflow: hidden;margin-top: 10px">
                        <span class="toRegistText">立即注册</span>
                        <span class="toForgetPswText" @click="pswVisible">忘记密码</span>
                    </div>
                </el-tabs>
            </div>
        </el-dialog>
        <!--        忘记密码弹窗-->
        <el-dialog :visible.sync="forgetPswVisible" width="360px" :show-close="true">
            <div slot="title" class="forgetPswBox">
                <p>忘记密码</p>
                <input type="text" placeholder="请输入帐号" class="normalInput" v-model="forgetName">
                <input type="text" placeholder="请输入密码" class="normalInput" v-model="forgetPassword">
                <input type="text" placeholder="请再次输入密码" class="normalInput" v-model="forgetPasswordAgain">
                <input type="text" placeholder="请输入手机号" class="normalInput" v-model="forgetPhone">
                <div>
                    <input type="text" placeholder="请输入验证码" v-model="forgetCode">
                    <button @click="forgetGetCode">获取验证码</button>
                </div>
                <button @click="changePswImport">确定更改密码</button>
            </div>
            <div style="overflow: hidden;padding: 10px 20px;">
                <span class="toRegistText">立即注册</span>
                <span class="toForgetPswText">去登录</span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // <!--    普通登录-->
    import {loginDefaultPost} from "../api/userLogin";
    //验证码登录
    import {loginPhoneCodeGet} from "../api/userLogin";
    import {loginPhonePost} from "../api/userLogin";
    import {forgetGetCode} from "../api/forgetPsw";
    import {changePsw} from "../api/forgetPsw";
    import {appAll} from "../api/appAll";

    export default {
        name: "alertLogin",
        props: {
            alert: Boolean
        },
        data() {
            return {

                activeName: 'second',
                defaultName: "",
                defaultPsw: "",
                //登录手机号
                loginPhone: "",
                //返回的验证码
                loginCode: "",
                // 负责显示的参数
                rigistVisible: false,
                forgetPswVisible: false,
                loginVisible: false,
                //    忘记密码相关参数
                forgetName: "",
                forgetPassword: "",
                forgetPasswordAgain: "",
                forgetPhone: "",
                forgetCode: "",
            }
        },
        methods: {
            handleClick(tab, event) {
                tab
                event
                // console.log(tab, event);
            },
            //正常登录时候的操作
            defaultLogin() {
                var loginDefaultData = new URLSearchParams()
                loginDefaultData.append("username", this.defaultName)
                loginDefaultData.append("password", this.defaultPsw)
                loginDefaultData.append("rememberMe", true)
                loginDefaultPost(loginDefaultData).then(res => {
                    console.log(res)
                    this.rigistVisible = false
                    this.forgetPswVisible = false
                    this.loginVisible = false
                    if(res.code==0){
                        this.$store.commit("updataLogin",true)
                        appAll().then(res=>{
                            console.log(res)
                            if(!(res.code==500)){
                                this.$store.commit("newMessage",res.userInfo)
                                this.$store.commit("updataLogin",true)
                            }
                        })
                    }
                })
            },
            //    请求验证码的操作
            getLoginCode() {
                loginPhoneCodeGet(this.loginPhone).then(res => {
                    console.log(res)
                })
            },
            //验证码登录
            phoneLogin() {
                var loginPhonePostData = new URLSearchParams()
                loginPhonePostData.append("mobile", this.loginPhone)
                loginPhonePostData.append("code", this.loginCode)
                loginPhonePostData.append("rememberMe", false)
                loginPhonePost(loginPhonePostData).then(res => {
                    console.log(res)
                    this.rigistVisible = false
                    this.forgetPswVisible = false
                    this.loginVisible = false
                    if(res.code==0){
                        this.$store.commit("updataLog",true)
                    }
                    appAll().then(res=>{
                        console.log(res)
                        if(!(res.code==500)){
                            this.$store.commit("newMessage",res.userInfo)
                            this.$store.commit("updataLogin",true)
                        }
                    })
                })
            },
            //    进入验证码界面
            pswVisible() {
                this.loginVisible = false;
                this.forgetPswVisible = true;
            },
            //    忘记密码都获取验证码 {}
            forgetGetCode() {
                let forGetCode = new URLSearchParams()
                forGetCode.append("loginName", this.forgetName)
                forGetCode.append("mobile", this.forgetPhone)
                forgetGetCode(forGetCode).then(res => {
                    console.log(res)
                })
            },
            //    更新密码
            changePswImport() {
                // 四个参数
                changePsw(this.forgetName, this.forgetPassword, this.forgetPhone, this.forgetCode).then(res => {
                    console.log(res)
                    this.rigistVisible = false
                    this.forgetPswVisible = false
                    this.loginVisible = false
                    localStorage.setItem('tianliangName', 'nickname')
                })
            }
        },
        watch: {
            alert() {
                this.loginVisible = true
            }
        }
    }
</script>

<style scoped lang="less">
    .loginDefault,
    .loginPhone {
        input {
            width: 98%;
            height: 32px;
            box-sizing: border-box;
            border: 1px solid #eaeaea;
            margin-bottom: 30px;
            padding: 4px 11px 4px 10px;
        }

        input:focus {
            outline: none;
            border: 1px solid #21e37f;
            box-shadow: 0px 0px 2px 1px #1fdc5d;
        }

        button {
            width: 98%;
            background-color: #30d28c;
            border: none;
            height: 32px;
            color: white;
        }

        .hulfButton {
            width: 30%;
            float: right;
            background-color: #30d28c;
            border-radius: 3px;
            color: white;
            margin-right: 2%;
            height: 32px;
            line-height: 32px;
            text-align: center;
        }

        .hulfInput {
            width: 63%;
        }
    }
    /*深度修改标题*/
    /deep/ .el-tabs__nav {
        width: 100%;
    }
    /deep/ .el-tabs__item {
        width: 50%!important;
        margin-right: 0%;
        margin-left: 0%;
        text-align: center;
    }
    /deep/ .el-tabs__item.is-active {
        color: #00997c;
    }
    /deep/ .el-tabs__item:hover{
        color: #00997c;
    }
    /deep/ .el-tabs__active-bar {
        background-color: #00997c;
    }
    /*最下方两个*/
    .toRegistText,
    .toForgetPswText {
        color: #acacac;
        font-size: 14px;
        cursor: pointer;
    }

    .toRegistText {
        float: left;
    }

    .toForgetPswText {
        float: right;
    }

    /deep/ .el-dialog__body {
        padding: 10px !important;
        /*display: none!important;*/
    }

    .forgetPswBox {
        text-align: center;
        padding: 20px;

        .normalInput {
            width: 98%;
            height: 22px;
            padding: 4px 10px;
            margin: 10px 0px;
            border: 1px solid #dcdcdc;
        }

        .normalInput:focus {
            outline: none;
            border: 1px solid #21e37f;
            box-shadow: 0px 0px 2px 1px #1fdc5d;
        }

        div {
            margin-top: 15px;
            margin-bottom: 14px;
            overflow: hidden;

            input {
                width: 45%;
                height: 22px;
                margin-right: 20px;
                padding: 4px 10px;
                border: 1px solid #dcdede;
                float: left;
            }

            input:focus {
                outline: none;
                border: 1px solid #21e37f;
                box-shadow: 0px 0px 2px 1px #1fdc5d;
            }
        }

        button {
            height: 32px;
            padding: 0px 15px;
            float: left;
            border: none;
            background-color: #30d28c;
            color: white;
        }
    }
</style>